import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';

/**
 * TabItem
 * @class {TabItem}
 * @extends {React.Component}
 */
export default class TabItem extends Component {

    static propTypes = {
        /**
         * 激活标签事件处理
         * @type {Function}
         */
        onSelect: PropTypes.func,

        /**
         * 关闭标签事件处理
         * @type {Function}
         */
        onClose: PropTypes.func,

        /**
         * 标签页标题
         * @type {string}
         */
        label: PropTypes.string,

        /**
         * 是否为当前选中项
         * @type {boolean}
         */
        active: PropTypes.bool,

        /**
         * 是否编辑过
         * @type {boolean}
         */
        modified: PropTypes.bool,

        /**
         * 是否允许关闭
         * @type {boolean}
         */
        closable: PropTypes.bool
    };

    render() {
        const { children, onSelect, onClose, label, active, 
            modified, closable } = this.props;

        return (
            <div onClick={onSelect}
                className={classNames('tab-item', { active, modified })}>
                <span>{label}</span>
                {!!closable && <i onClick={onClose} className="icon-close"></i>}
            </div>
        );
    }
}